<!-- ajax layout which only needs content area -->
<div class="row">
    <div class="col-xs-12 form-btn-wrapper">
    <!-- 界面开始 -->
    <div class="form-horizontal" role="form">


        
    <!-- 自定义一个状态 -->
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="status" data-i18n="Custom Status"></label>
        <div class="col-sm-9">
            <!-- 状态选项 -->
            <label><input id="status" class="ace ace-switch ace-switch-6" type="checkbox" /><span class="lbl"></span></label>
        </div>
    </div>


    <div id="statusSets">

        <!-- 自定义一个属性 -->
        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="property" data-i18n="Custom Property"></label>
            <div class="col-sm-9">
                <!-- 属性输入框 -->
                <div class="clearfix"><input type="text" id="property" class="col-xs-10 col-sm-5" maxlength="128" /></div>
            </div>
        </div>

    </div><!--statusSets-->


    <!-- 按键面板 -->
    <div class="clearfix form-actions">
        <div class="col-md-offset-3 col-md-9">
            <!-- 刷新按键 -->
            <button class="btn btn-second" type="button" id="refresh"><span data-i18n="Refresh"></span></button>
            &nbsp; &nbsp; &nbsp;
            <!-- 应用按键 -->
            <button class="btn btn-main" type="button" id="apply"><span data-i18n="Apply"></span></button>
        </div>
    </div>



    </div>
    <!-- 界面结束 -->
  </div><!-- /.col -->
</div><!-- /.row -->



<!-- page specific plugin scripts -->
<script type="text/javascript">
(function () {
    // Javascript开始



    // 组件配置名称
    var comname = "templat@com";
    // 存放组件配置的变量
    var comcfg;
    // 语言文件路径, 自动跟据系统语言类型变化路径(在prj.json中指名)
    var langjson = base64.decode( page.param( 'lang', location.hash ) );

    // 从系统获取组件配置并填入界面中
    function load_comcfg()
    {
        // 从系统获取组件配置的调用
        he.load( [ comname ] ).then( function(v){
            // 将获到的配置赋值给存放组件配置的变量
            comcfg = v[0];
            if ( !comcfg )
            {
                comcfg = {};
            }
            // 将组件配置状态填入状态选项
            $('#status').prop( 'checked', able2boole(comcfg.status) );
            // 将组件配置属性值填入属性输入框中
            $('#property').val( comcfg.property );
            // 为状态选项绑定函数处理, 实现点选时界面隐藏或显示属性输入框
            $('#status').unbind('change').change(function () {
                // 如果选中
                if ($(this).prop('checked'))
                {
                    // 显示
                    $('#statusSets').show();
                }
                // 否则
                else
                {
                    //隐藏
                    $('#statusSets').hide();
                }
            }).trigger('change');
        });
    }


    // 从界面得到修改的配置后保存并应用到组件配置中
    function save_comcfg()
    {
        if ( !comcfg )
        {
            comcfg = {};
        }
        // 拷贝一份组件配置
        var comcfgcopy = JSON.parse(JSON.stringify(comcfg));
        // 从状态选项中得到组件状态
        comcfg.status = boole2able( $('#status').prop('checked') );
        if ( comcfg.status == "enable" )
        {
            // 从属性输入框中得到组件属性值
            comcfg.property = $('#property').val();
        }
        // 比较拷贝确定组件配置是否有被修改
        if ( ocompare( comcfg, comcfgcopy ) )
        {
            // 如果未修改提示没有修改不需要应用
            page.alert( { message: $.i18n('Settings unchanged') } );
            return;
        }
        // 向系统保存并应用组件配置的调用
        he.save( [ comname+"="+JSON.stringify(comcfg) ] ).then( function(){
            // 提示应用成功
            page.hint2succeed( $.i18n('Modify successfully') );
            // 刷新界面内容
            load_comcfg();
        });
    }
    
    // 加载语言文件
    $.i18n().load( page.lang(langjson) ).then( function () {
        // 界面语言初始化
        $.i18n().locale = window.lang; $('body').i18n();
        // 加载组件配置
        load_comcfg();
        /* 绑定刷新按键 */
        $('#refresh').on(ace.click_event, function () {
            location.reload();
        });
        /* 绑定应用按键 */
        $('#apply').on(ace.click_event, function () {
            // 点应用时保存并应用组件配置
            save_comcfg();
        });
    });



    // Javascript结束
})()
</script>
